<template>
	<view class="content">
		<view id="container">

		</view>
		<view class="return" @click="toReturn()" style="z-index: 999;background: white;">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<view class="tabs">
			<!-- 	<view class="tabsItem" @click="toPoint(1)">
				<image src="/static/point/icon1.png"></image>
				<view>全部</view>
			</view> -->
			<view class="tabsItem" @click="toPoint(2)">
				<image src="/static/point/icon2.png"></image>
				<view>景点</view>
			</view>
			<view class="tabsItem" @click="toPoint(3)">
				<image src="/static/point/icon6.png"></image>
				<view>酒店</view>
			</view>
			<view class="tabsItem" @click="toPoint(4)">
				<image src="/static/point/icon4.png"></image>
				<view>停车场</view>
			</view>
			<view class="tabsItem" @click="toPoint(5)">
				<image src="/static/point/icon5.png"></image>
				<view>公共厕所</view>
			</view>
		</view>
		<!-- <cover-view class="tabs" @touchmove.prevent.stop="noop" catchtouchmove>
			<cover-image mode="widthFix" src="/static/point/icon1.png" @click="toPoint(1)"></cover-image>
		</cover-view> -->
	</view>
</template>

<script>
	import {
		scenicList,
		culturalList,
		parkadeList,
		hotelList,
		toiletList
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				map: null,
				marker: null,
				markerS: null,
				mask: '',
				mark2: null,
				mark1: null,
				list: [],
				list2: [],
				list3: [],
				list4: [],
			};
		},
		mounted() {
			this.initQQMap();
		},
		methods: {
			toReturn() {
				uni.navigateBack()
			},
			noop() {

			},
			initQQMap() {
				const that = this;
				that.map = new TMap.Map('container', {
					center: new TMap.LatLng(28.689006, 115.989761),
					zoom: 13,
					zIndex: 2
				});
				// var imageSW = new TMap.LatLng(28.586015, 115.954893); //西南 左下
				var imageSW = new TMap.LatLng(28.584207, 115.946944); //西南 左下
				// var imageNE = new TMap.LatLng(28.813286, 116.216673); // 东北角 右上
				var imageNE = new TMap.LatLng(28.809256, 116.222627); // 东北角 右上
				var imageLatLngBounds = new TMap.LatLngBounds(imageSW, imageNE);
				var imageGroundLayer = new TMap.ImageGroundLayer({
					bounds: imageLatLngBounds,
					// src: './static/map.png',
					src: 'https://gxtravel.ncscloudmedia.com/uploads/png/20250701/fb0542dd3471f6cd78914dec3fc15e1f.png',
					map: that.map,
				});
				that.mask = new TMap.MaskLayer({
					map: that.map,
					geometries: [],
				});
				// that.addMaskLayer()
				// this.createMarker()

			},
			// 获取景点
			async getList1(n) {
				let result = ''
				if(n==2){
				result = await scenicList()
				}
				if (result.code == 1) {
					let list = result.data.list
					let that = this
					that.list = result.data.list
					list.forEach(item => {
						that.markerS = new TMap.MultiMarker({
							map: that.map,
							styles: {
								// 点标记样式
								marker: new TMap.MarkerStyle({
									width: 30, // 样式宽
									height: 30, // 样式高
									anchor: {
										x: 0,
										y: 0
									}, // 描点位置
									offset: {
										x: 0,
										y: 30
									},
									size: 10, // 标注点文本文字大小
									color: '#fff', // 字体颜色
									backgroundColor: '#00AF91', // 文本背景颜色
									backgroundBorderRadius: 24, // 文本背景框圆角
									padding: '5px 10px', // 标注点文字背景框内边距
									src: item.map_logo,
									// src: './static/point/point2.png',
									enableRelativeScale: false, //是否开启相对缩放
								}),
							},
							geometries: [
								// 点标记数据数组
								{
									content: item.name,
									styleId: 'marker',
									// 标记位置(纬度，经度，高度)
									position: new TMap.LatLng(item.latitude, item.longitude),
									id: '/pages/scenic/detail/detail?id=' + item.id,
								},
							],
						});
						that.markerS.on("click", that.eventClick)
						that.getPoint(n)
					})
				} else {
					uni.showToast({
						title: result.msg,
						icon: "error"
					})
				}
			},
			getPoint(n) {
				let that = this
				let arr = []
				that.list.forEach(item => {
					arr.push({
						id: '/pages/scenic/detail/detail?id=' + item.id,
						styleId: 'small', // 对应中的样式id
						position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
					})
				})
				console.log(arr)
				that.mark1 = new TMap.MultiMarker({
					map: that.map, // 显示Marker图层的底图
					styles: {
						small: new TMap.MarkerStyle({
							// 点标注的相关样式
							width: 20, // 宽度
							height: 20, // 高度
							enableRelativeScale: true, //是否开启相对缩放
							anchor: {
								x: -10,
								y: 10
							}, // 标注点图片的锚点位置
							src: './static/point/icon2.png', // 标注点图片url或base64地址
						}),
					},
					enableCollision: true, // 开启碰撞
					geometries: arr
				});
				that.mark1.on("click", that.eventClick)
				that.map.setCenter(arr[0].position);
				that.map.setZoom(15);
				if (that.mark2) {
					that.mark2.setMap(null)
					that.mark2 = null
				}
			},
			// 酒店
			async getList2() {
				const result = await hotelList()
				if (result.code == 1) {
					let list = result.data.list
					let that = this
					that.list2 = result.data.list
					list.forEach(item => {
						that.markerS = new TMap.MultiMarker({
							map: that.map,
							styles: {
								// 点标记样式
								marker: new TMap.MarkerStyle({
									width: 30, // 样式宽
									height: 30, // 样式高
									anchor: {
										x: 0,
										y: 0
									}, // 描点位置
									offset: {
										x: 0,
										y: 30
									},
									size: 10, // 标注点文本文字大小
									color: '#fff', // 字体颜色
									backgroundColor: '#00AF91', // 文本背景颜色
									backgroundBorderRadius: 24, // 文本背景框圆角
									padding: '5px 10px', // 标注点文字背景框内边距
									src: item.map_logo,
									enableRelativeScale: false, //是否开启相对缩放
								}),
							},
							geometries: [
								// 点标记数据数组
								{
									content: item.name,
									styleId: 'marker',
									// 标记位置(纬度，经度，高度)
									position: new TMap.LatLng(item.latitude, item.longitude),
									id: '/pages/hotel/detail/detail?id=' + item.id,
								},
							],
						});
						that.markerS.on("click", that.eventClick)
					})
				} else {
					uni.showToast({
						title: result.msg,
						icon: "error"
					})
				}
			},
			// 停车场
			async getList3() {
				const result = await parkadeList()
				if (result.code == 1) {
					let list = result.data.list
					let that = this
					that.list3 = result.data.list
					list.forEach(item => {
						that.markerS = new TMap.MultiMarker({
							map: that.map,
							styles: {
								// 点标记样式
								marker: new TMap.MarkerStyle({
									width: 30, // 样式宽
									height: 30, // 样式高
									anchor: {
										x: 0,
										y: 0
									}, // 描点位置
									offset: {
										x: 0,
										y: 30
									},
									size: 10, // 标注点文本文字大小
									color: '#fff', // 字体颜色
									backgroundColor: '#00AF91', // 文本背景颜色
									backgroundBorderRadius: 24, // 文本背景框圆角
									padding: '5px 10px', // 标注点文字背景框内边距
									src: item.map_logo,
									enableRelativeScale: false, //是否开启相对缩放
								}),
							},
							geometries: [
								// 点标记数据数组
								{
									content: item.name,
									styleId: 'marker',
									// 标记位置(纬度，经度，高度)
									position: new TMap.LatLng(item.latitude, item.longitude),
									id: '/pages/park/park',
								},
							],
						});
						that.markerS.on("click", that.eventClick)
					})
				} else {
					uni.showToast({
						title: result.msg,
						icon: "error"
					})
				}
			},
			// 公共厕所
			async getList4() {
				const result = await toiletList()
				if (result.code == 1) {
					let list = result.data.list
					let that = this
					that.list4 = result.data.list
					list.forEach(item => {
						that.markerS = new TMap.MultiMarker({
							map: that.map,
							styles: {
								// 点标记样式
								marker: new TMap.MarkerStyle({
									width: 30, // 样式宽
									height: 30, // 样式高
									anchor: {
										x: 0,
										y: 0
									}, // 描点位置
									offset: {
										x: 0,
										y: 30
									},
									size: 10, // 标注点文本文字大小
									color: '#fff', // 字体颜色
									backgroundColor: '#00AF91', // 文本背景颜色
									backgroundBorderRadius: 24, // 文本背景框圆角
									padding: '5px 10px', // 标注点文字背景框内边距
									src: item.map_logo,
									enableRelativeScale: false, //是否开启相对缩放
								}),
							},
							geometries: [
								// 点标记数据数组
								{
									content: item.name,
									styleId: 'marker',
									// 标记位置(纬度，经度，高度)
									position: new TMap.LatLng(item.latitude, item.longitude),
									id: '/pages/toilet/toilet',
								},
							],
						});
						that.markerS.on("click", that.eventClick)
					})
				} else {
					uni.showToast({
						title: result.msg,
						icon: "error"
					})
				}
			},
			createMarker() {
				// 28.697225, 115.995881
				// 28.714497,115.986516
				let that = this
				let mark1 = new TMap.MultiMarker({
					map: that.map, // 显示Marker图层的底图
					styles: {
						small: new TMap.MarkerStyle({
							// 点标注的相关样式
							width: 36, // 宽度
							height: 36, // 高度
							enableRelativeScale: false, //是否开启相对缩放
							anchor: {
								x: 17,
								y: 23
							}, // 标注点图片的锚点位置
							src: './static/point/point.png', // 标注点图片url或base64地址
						}),
					},
					enableCollision: true, // 开启碰撞
					geometries: [{
						id: '标记点1',
						styleId: 'small', // 对应中的样式id
						position: new TMap.LatLng(28.697225, 115.995881), // 标注点位置
					}],
				});
				// marker文字在图片内
				let mark2 = new TMap.MultiMarker({
					map: that.map,
					styles: {
						default: new TMap.MarkerStyle({
							width: 60, // 宽度
							height: 70, // 高度
							enableRelativeScale: true, //是否开启相对缩放
							anchor: {
								x: 20,
								y: 0
							}, // 锚点位置
							src: './static/point/point2.png', // 标注点图片url或base64地址
							color: '#fff', // 标注点文本颜色
							size: 22, // 标注点文本文字大小
							offset: {
								x: 0,
								y: 16
							}, // 标注点文本文字基于direction方位的偏移属性
						}),
					},
					geometries: [{
						id: '标记点2',
						position: new TMap.LatLng(28.714497, 115.986516), // 标注点位置
						content: '41', // 标注点文本
					}],
				});
				mark1.on("click", that.eventClick)
				mark2.on("click", that.eventClick)
			},
			addMaskLayer() {
				var paths = [
					new TMap.LatLng(28.764428, 115.907744),
					new TMap.LatLng(28.77266, 116.16339),
					new TMap.LatLng(28.595072, 116.096609),
					new TMap.LatLng(28.608356, 115.884267)
				];
				this.mask.add([{
					id: 'mask-layer',
					paths: paths,
				}]);
			},
			eventClick(e) {
				console.log(e)
				let url = e.geometry.id
				uni.navigateTo({
					url: url
				})

			},
			toPoint(n) {
				console.log(n)
				let that = this
				// if(n==1){
				// 	that.map.setZoom(12);
				// }
				if (n == 2) {
					that.removeMarker()
					that.getList1(n)
				}
				if (n == 3) {
					that.removeMarker()
					that.getList2()

					let arr = []
					that.list2.forEach(item => {
						arr.push({
							id: '/pages/hotel/detail/detail?id=' + item.id,
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					console.log(arr)
					that.mark1 = new TMap.MultiMarker({
						map: that.map, // 显示Marker图层的底图
						styles: {
							small: new TMap.MarkerStyle({
								// 点标注的相关样式
								width: 20, // 宽度
								height: 20, // 高度
								enableRelativeScale: true, //是否开启相对缩放
								anchor: {
									x: -10,
									y: 10
								}, // 标注点图片的锚点位置
								src: './static/point/icon6.png', // 标注点图片url或base64地址
							}),
						},
						enableCollision: true, // 开启碰撞
						geometries: arr
					});
					that.mark1.on("click", that.eventClick)
					that.map.setZoom(12);
					that.map.setCenter(arr[0].position);
					if (that.mark2) {
						that.mark2.setMap(null)
						that.mark2 = null
					}
				}
				if (n == 4) {
					that.removeMarker()
					that.getList3()
					let arr = []
					that.list3.forEach(item => {
						arr.push({
							id: '/pages/park/park',
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					console.log(arr)
					that.mark1 = new TMap.MultiMarker({
						map: that.map, // 显示Marker图层的底图
						styles: {
							small: new TMap.MarkerStyle({
								// 点标注的相关样式
								width: 20, // 宽度
								height: 20, // 高度
								enableRelativeScale: true, //是否开启相对缩放
								anchor: {
									x: -10,
									y: 10
								}, // 标注点图片的锚点位置
								src: './static/point/icon4.png', // 标注点图片url或base64地址
							}),
						},
						enableCollision: true, // 开启碰撞
						geometries: arr
					});
					that.mark1.on("click", that.eventClick)
					that.map.setCenter(arr[0].position);
					that.map.setZoom(12);
					if (that.mark2) {
						that.mark2.setMap(null)
						that.mark2 = null
					}
				}
				if (n == 5) {
					that.removeMarker()
					that.getList4()
					let arr = []
					that.list4.forEach(item => {
						arr.push({
							id: '/pages/toilet/toilet',
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					console.log(arr)
					that.mark1 = new TMap.MultiMarker({
						map: that.map, // 显示Marker图层的底图
						styles: {
							small: new TMap.MarkerStyle({
								// 点标注的相关样式
								width: 20, // 宽度
								height: 20, // 高度
								enableRelativeScale: true, //是否开启相对缩放
								anchor: {
									x: -10,
									y: 10
								}, // 标注点图片的锚点位置
								src: './static/point/icon5.png', // 标注点图片url或base64地址
							}),
						},
						enableCollision: true, // 开启碰撞
						geometries: arr
					});
					that.mark1.on("click", that.eventClick)
					that.map.setCenter(arr[0].position);
					that.map.setZoom(12);
					if (that.mark2) {
						that.mark2.setMap(null)
						that.mark2 = null
					}
				}
			},
			//移除marker事件
			removeMarker() {
				console.log(999)
				console.log(this.markerS)
				if (this.markerS) {
					this.markerS.setMap(null);
					this.markerS = null;
				}
				if (this.mark1) {
					this.mark1.setMap(null);
					this.mark1 = null;
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	#container {
		width: 100%;
		position: absolute;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.tabs {
		position: absolute;
		left: 40rpx;
		background: white;
		bottom: 300rpx;
		border-radius: 10rpx;
		box-shadow: 1rpx 2rpx 10rpx 1rpx gray;
		z-index: 999;
		font-size: 24rpx;
		color: #3E4059;
		padding: 10rpx 10rpx;
		text-align: center;

		image {
			width: 50rpx;
			height: 50rpx;
		}

		.tabsItem {
			margin-bottom: 16rpx;
			box-shadow: 1rpx 2rpx 10rpx 1rpx gainsboro;
			padding: 10rpx;
		}
	}
</style>